<!-- 工业源 基101-->
<template>
  <div class="app-container">
    <div v-show="showSearch">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px" class="search-form">

        <el-form-item label="行政区划" prop="regionCode">
          <!-- <RegionSelect v-model:regionCode="queryParams.regionCode" style="width:200px"></RegionSelect> -->
          <el-select v-model="queryParams.regionCode" style="width: 100%">
            <el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="年份" prop="year">
          <!-- <el-date-picker v-model="queryParams.year" value-format="YYYY" type="year" placeholder="统计年份"></el-date-picker> -->
          <el-select v-model="queryParams.year" style="width: 100%">
            <el-option v-for="item in yearlist" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="关键字" prop="keyword">
          <el-input style="width: 330px" v-model="queryParams.keyword" placeholder="单位名称、组织机构代码、统一社会信用代码" clearable />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery" style="margin-left: 20px">搜索</el-button>
          <el-button icon="refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="info" plain icon="Upload" :loading="exportLoading" @click="handleImport">导入</el-button>
        <el-button type="warning" plain icon="Filter" @click="clickFun">筛选</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="fetchList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="datashowList" @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column align="center" fixed label="序号" width="60" type="index" :index="(index) => { return (index+1+(queryParams.pageNum-1)*queryParams.pageSize) }" />
      <el-table-column align="center" label="统计年份" prop="year" />
      <el-table-column align="center" label="组织机构代码" prop="org" width="120" />
      <el-table-column align="center" label="统一社会信用代码" prop="socialCreditCode" width="130" />
      <el-table-column align="center" label="填报单位详细名称" prop="unitName" width="150" />
      <el-table-column align="center" label="行政区代码" prop="regionCode" width="100" />
      <el-table-column align="center" label="行政区名称" prop="regionName" width="100" />
      <el-table-column align="center" label="行业类别代码" prop="categoryCode" width="110" />
      <el-table-column align="center" label="行业类别名称" prop="categoryName" width="110" />
      <el-table-column align="center" label="曾用名" prop="onceName" width="100" />
      <el-table-column align="center" label="法人代表姓名" prop="legalName" width="120" />
      <el-table-column align="center" label="详细地址省(自治区、直辖市)" prop="provinceName" width="140" />
      <el-table-column align="center" label="详细地址地区(市、州、盟)" prop="cityName" width="130" />
      <el-table-column align="center" label="详细地址县(区、市、旗)" prop="regionName" width="120" />
      <el-table-column align="center" label="详细地址乡(镇)" prop="townName" width="120" />
      <el-table-column align="center" label="详细地址街(村)、门牌号" prop="villageName" width="140" />
      <el-table-column align="center" label="联系方式联系人" prop="telephone" width="160" />
      <template v-if="datashowList[0]&&datashowList[0].fields&&datashowList[0].fields[0]">
        <template v-for="(item, index) in datashowList[0].fields" :key="index">
          <el-table-column align="center" :label="item.title" width="160">
            <template #default="scope">
              {{scope.row.fields[index].value}}
            </template>
          </el-table-column>
        </template>
      </template>

      <el-table-column label="导入时间" align="center" prop="createTime" width="160">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="fetchList" />

    <!-- 导入弹窗组件 -->
    <LeadingInUpload v-model:open="open" :title="title" :url="'/base/emissionSource/importData'" @fileSubmit="handleQuery" :downloadUrl="'/base/emissionSource/downloadTemplate'" :downloadData="{type:1}" />

    <el-dialog title="选择查看内容" class="industrialSources" v-model="checkOpen" width="700px" append-to-body>
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="(item, index) in yusnList" :label="item.title" :key="index" />
      </el-checkbox-group>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="checkOpen=false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup  name="IndustrialSources">
import RegionSelect from "@/components/RegionSelect/index"; //行政区划组件
import {
  emissionSourceList,
  getRegionList,
  getyearsList,
  deleteIndustryById,
} from "@/api/emissionSource/emissionData/industrialSources.js";
import { getDictTitle, isBlank } from "@/utils/biz";
import useUserStore from "@/store/modules/user";
const { proxy } = getCurrentInstance();

const userStore = useUserStore();

const loading = ref(false); // 遮罩层
const exportLoading = ref(false); // 导出遮罩层
const showSearch = ref(true); // 显示搜索条件
const dataList = ref([]); // 原始表格数据
const datashowList = ref([]); // 展示表格数据
const checkList = ref([
  "工业总产值（当年价格）（万元）",
  "年正常生产时间（小时）",
  "取水量（吨）",
  "煤炭消费量（吨）",
  "燃料油消费量(不含车船用)（吨）",
  "焦炭消费量（吨）",
  "焦炭平均灰分（%）",
  "天然气消费量（万立方米）",
  "其他燃料消费量（吨标准煤）",
  "用电量（万千瓦时）",
  "工业锅炉数（台）",
  "工业锅炉蒸吨数（蒸吨）",
  "工业窑炉数（座）",
]); // 选中数据
const yusnList = ref([]); // 原始数据
const total = ref(0);
const open = ref(false);
const checkOpen = ref(false);
const title = "工业源导入";
const queryParams = ref({
  regionCode: "",
  keyword: "",
  year: "",
  pageNum: 1,
  pageSize: 10,
});
/** 列表数据 **/
function fetchList() {
  loading.value = true;
  emissionSourceList(queryParams.value).then((res) => {
    dataList.value = res.rows;
    datashowList.value = JSON.parse(JSON.stringify(res.rows));
    total.value = res.total;
    loading.value = false;
    if (res.rows && res.rows[0] && res.rows[0].fields) {
      yusnList.value = res.rows[0].fields;
      submitForm();
    }
  });
}

const cityList = ref([]);

function getciytList() {
  getRegionList({ type: 1 }).then((res) => {
    console.log(res);
    cityList.value = res.data;
  });
}

const multiple = ref(true); // 非多个禁用
const ids = ref([]); // 选中数组
const single = ref(true); // 非单个禁用
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

const yearlist = ref([]);
function getyearSelect() {
  getyearsList({ type: 1 }).then((res) => {
    yearlist.value = res.data;
  });
}

function submitForm() {
  for (let i = 0; i < datashowList.value.length; i++) {
    const ele = datashowList.value[i];
    const item = dataList.value[i];
    ele.fields = item.fields.filter((item) =>
      checkList.value.includes(item.title)
    );
  }
  checkOpen.value = false;
  console.log(dataList.value[0].fields);
  console.log(datashowList.value[0].fields);
}

function clickFun() {
  checkOpen.value = true;
}
/**搜索**/
function handleQuery() {
  queryParams.value.pageNum = 1;
  fetchList();
}

function resetQuery() {
  /** 重置按钮操作 */
  proxy.resetForm("queryForm");
  handleQuery();
}

/** 新增按钮操作 */
function handleAdd(row) {}
/** 导入操作 **/
function handleImport() {
  open.value = true;
}

/** 删除按钮操作 */
function handleDelete() {
  const roleIds = ids.value;
  proxy.$modal
    .confirm("是否确认删除该数据项?", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
    .then(function () {
      return deleteIndustryById(roleIds);
    })
    .then(() => {
      fetchList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

getyearSelect();
getciytList();
fetchList();
</script>
<style scoped="scoped" lang="scss">
.industrialSources .el-checkbox-group {
  height: 400px;
  overflow: auto;
  padding-left: 20px;
  // display: flex;
  // justify-content: space-evenly;
  // flex-wrap: wrap;
}
.el-checkbox-group .el-checkbox {
  width: 300px;
  margin-right: 0;
  margin-left: 10px;
}
</style>
